<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map搜索兴趣点 </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=F1HTcXXaXIlbjdwO8hoZKXgJp1ZnQVAe"></script>
</head>
<body>
<div id="container"></div>

<!-- 搜索框 -->
<div style="position:absolute; top:10px; left:10px; z-index:999; background:white; padding:10px; border-radius:5px;">
    <input type="text" id="searchInput" placeholder="请输入搜索内容" />
    <button onclick="searchLocation()">搜索</button>
</div>

<div id="r-result" style="position:absolute; top:60px; left:10px; width:300px; height:400px; overflow:auto; background:white; z-index:999;"></div>

<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(102.842, 24.858);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    var local = new BMapGL.LocalSearch(map, {
        renderOptions:{map: map,panel: "r-result"},
        pageCapacity: 100
    });

    function searchLocation() {
        var keyword = document.getElementById("searchInput").value;
        if (keyword.trim() !== "") {
            local.search(keyword);
        }
    }


</script>

</body>
</html>